<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<!DOCTYPE HTML>
<html>
<!--
Basic tests for the HSplitBox component.
-->
<head>
  <meta charset="utf-8">
  <title>Tree component test</title>
  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
  <script type="application/javascript "src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
  <link rel="stylesheet" href="resource://devtools/client/themes/splitters.css" type="text/css"/>
  <link rel="stylesheet" href="chrome://devtools/skin/components-h-split-box.css" type="text/css"/>
  <style>
    html {
      --theme-splitter-color: black;
    }
  </style>
</head>
<body>
<pre id="test">
<script src="head.js" type="application/javascript;version=1.8"></script>
<script type="application/javascript;version=1.8">
const FUDGE_FACTOR = .1;
function aboutEq(a, b) {
  dumpn(`Checking ${a} ~= ${b}`);
  return Math.abs(a - b) < FUDGE_FACTOR;
}

window.onload = Task.async(function* () {
  try {
    const React = browserRequire("devtools/client/shared/vendor/react");
    const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");

    let HSplitBox = React.createFactory(browserRequire("devtools/client/shared/components/h-split-box"));
    ok(HSplitBox, "Should get HSplitBox");

    const newSizes = [];
    const box = ReactDOM.render(HSplitBox({
      start: "hello!",
      end: "world!",
      startWidth: .5,
      onResize(newSize) {
        newSizes.push(newSize);
      },
    }), window.document.body);

    // Test that we properly rendered our two panes.

    let panes = document.querySelectorAll(".h-split-box-pane");
    is(panes.length, 2, "Should get two panes");
    is(panes[0].style.flexGrow, "0.5", "Each pane should have .5 width");
    is(panes[1].style.flexGrow, "0.5", "Each pane should have .5 width");
    is(panes[0].textContent.trim(), "hello!", "First pane should be hello");
    is(panes[1].textContent.trim(), "world!", "Second pane should be world");

    // Now change the left width and assert that the changes are reflected.

    yield setProps(box, { startWidth: .25 });
    panes = document.querySelectorAll(".h-split-box-pane");
    is(panes.length, 2, "Should still have two panes");
    is(panes[0].style.flexGrow, "0.25", "First pane's width should be .25");
    is(panes[1].style.flexGrow, "0.75", "Second pane's width should be .75");

    // Mouse moves without having grabbed the splitter should have no effect.

    let container = document.querySelector(".h-split-box");
    ok(container, "Should get our container .h-split-box");

    const { left, top, width } = container.getBoundingClientRect();
    const middle = left + width / 2;
    const oneQuarter = left + width / 4;
    const threeQuarters = left + 3 * width / 4;

    synthesizeMouse(container, middle, top, { type: "mousemove" }, window);
    is(newSizes.length, 0, "Mouse moves without dragging the splitter should have no effect");

    // Send a mouse down on the splitter, and then move the mouse a couple
    // times. Now we should get resizes.

    const splitter = document.querySelector(".devtools-side-splitter");
    ok(splitter, "Should get our splitter");

    synthesizeMouseAtCenter(splitter, { button: 0, type: "mousedown" }, window);

    function mouseMove(clientX) {
      const event = new MouseEvent("mousemove", { clientX });
      document.defaultView.top.dispatchEvent(event);
    }

    mouseMove(middle);
    is(newSizes.length, 1, "Should get 1 resize");
    ok(aboutEq(newSizes[0], .5), "New size should be ~.5");

    mouseMove(left);
    is(newSizes.length, 2, "Should get 2 resizes");
    ok(aboutEq(newSizes[1], 0), "New size should be ~0");

    mouseMove(oneQuarter);
    is(newSizes.length, 3, "Sould get 3 resizes");
    ok(aboutEq(newSizes[2], .25), "New size should be ~.25");

    mouseMove(threeQuarters);
    is(newSizes.length, 4, "Should get 4 resizes");
    ok(aboutEq(newSizes[3], .75), "New size should be ~.75");

    synthesizeMouseAtCenter(splitter, { button: 0, type: "mouseup" }, window);

    // Now that we have let go of the splitter, mouse moves should not result in resizes.

    synthesizeMouse(container, middle, top, { type: "mousemove" }, window);
    is(newSizes.length, 4, "Should still have 4 resizes");

  } catch(e) {
    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
  } finally {
    SimpleTest.finish();
  }
});
</script>
</pre>
</body>
</html>
